<template>
	<div class="wy-main user-auth-enterprise">
		<a-form :form="form" @submit="handleSubmit" class="wy-form">
			<a-form-item v-bind="formItemLayout" label="登   录   名">
				<a-input disabled v-decorator="[ 'username', {rules: [{ required: true, message: '登录名不能为空!' }]}]" placeholder='请填写' />
			</a-form-item>
			<a-form-item v-bind="formItemLayout" label="手机号码">
				<a-input disabled v-decorator="[ 'mobile', {rules: [{ required: true, message: '手机号码不能为空!' },{validator: checkMobile}]}]" placeholder='请填写' />
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="企业类型">
				<a-select disabled style="width: 280px;" v-decorator="[ 'companyType', {rules: [{ required: true, message: '企业类型不能为空!' }]}]" placeholder="请选择企业类型">
					<a-select-option value="0">
						境内企业
					</a-select-option>
					<a-select-option value="1">
						境外企业
					</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item v-bind="formItemLayout" label="企业名称">
				<a-input disabled v-decorator="[ 'company', {rules: [{ required: true, message: '企业名称不能为空!' }]}]" placeholder='请填写' />
			</a-form-item>
			<a-form-item v-bind="formItemLayout" label="统一社会信用代码">
				<a-input maxlength="18" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" v-decorator="[ 'socialCode', {rules: [{ required: true, message: '统一社会信用代码不能为空!' }]}]" placeholder='请填写' />
			</a-form-item>
			<a-form-item v-bind="formItemLayout" label="企业成立时间">
				<a-date-picker show-time :disabledDate="disabledDate" format="YYYY-MM-DD HH:mm:ss" style="width: 280px;"  v-decorator="[ 'companyCreateTime', {rules: [{ required: true, message: '企业成立时间不能为空!' }]}]" placeholder='请选择' />
			</a-form-item>
			<a-form-item v-bind="formItemLayout" label="法定代表人姓名">
				<a-input type="text" maxlength="48" onkeyup="value=value.replace(/[\d]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))" v-decorator="[ 'legalPerson', {rules: [{ required: true, message: '法定代表人姓名不能为空!' }]}]" placeholder='请填写' />
				<!--<a-input type="text" maxlength="48" onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))" v-decorator="[ 'legalPerson', {rules: [{ required: true, message: '法定代表人姓名不能为空!' }]}]" placeholder='请填写' />-->
			</a-form-item>
			<a-form-item v-bind="formItemLayout" label="企业注册地址">
				<a-input maxlength="128" v-decorator="[ 'companyAddress', {rules: [{ required: true, message: '企业注册地址不能为空!' }]}]" placeholder='请填写' />
			</a-form-item>
			<a-form-item v-bind="formItemLayout" label="座机">
				<a-input maxlength="12" onkeyup="this.value=this.value.replace(/[^0-9-]+/,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" v-decorator="[ 'landline', {rules: [{ required: true, message: '座机号码不能为空!' }]}]" placeholder='请填写' />
			</a-form-item>
			<a-form-item v-bind="formItemLayout" label="企业简介">
				<a-input v-decorator="[ 'companyBriefRemark', {rules: [{ required: true, message: '企业简介不能为空!' }]}]" placeholder='请填写企业简介' />
			</a-form-item>

			
			<!-- <a-form-item v-bind="formItemLayout" label="QQ">
				<a-input v-decorator="[ 'qq', {rules: [{ required: true, message: 'QQ不能为空!' }]}]" placeholder='请填写' />
			</a-form-item> -->
<!-- 
企业形象照
@ApiModelProperty(value = "营业执照扫描件")
private String certificatesjpg;
@ApiModelProperty(value = "营业执照存放目录")
private String certificatesPath;
@ApiModelProperty(value = "身份证正面")
private String cardPicFace;
@ApiModelProperty(value = "身份证反面")
private String cardPicAddr;
@ApiModelProperty(value = "身份证正面存放目录")
private String cardPicFacePath;
@ApiModelProperty(value = "身份证反面存放目录")
private String cardPicAddrPath;
@ApiModelProperty(value = "企业形象照片")
private  String companyPic;
@ApiModelProperty(value = "企业形象地址")
private  String companyPath;
@ApiModelProperty(value = "企业描述")
private transient String companyRemark;
@ApiModelProperty(value = "企业介绍")
private transient String companyBriefRemark; @Joshen -->

			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="企业形象照" class="upzjimg">
				<a-upload v-decorator="['xingxiangzhao', {rules: [{ required: true, message: '企业形象照不能为空!' }]}]" name="file" listType="picture-card"  class="avatar-uploader up_img" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="company_Change">
					<div class="img_zz" v-if="company_img">
						<div class="img_zz_text" >
							<a-icon style="font-size: 30px;" :type="Uploading ? 'Uploading' : 'plus'" />
							<div class="ant-upload-text" style="margin-top: 10px;">
								请上传正确的企业形象图片面，否则影响后期业务办理 图片格式：jpg.jpeg.png
							</div>
						</div>
						<div class="img_zz_d"></div>
					</div>
					<img  v-if="company_img" :src="company_img" alt="avatar" />
					<div class="up_img_d" v-if="!company_img">
						<a-icon style="font-size: 30px;" :type="Uploading ? 'Uploading' : 'plus'" />
						<div class="ant-upload-text" style="margin-top: 10px;">
							请上传正确的企业形象图片面，否则影响后期业务办理 图片格式：jpg.jpeg.png
						</div>
					</div>
				</a-upload>
			</a-form-item>

			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="营业执照扫描件" class="upzjimg">
				<a-upload  v-decorator="['yinyezhizhao', {rules: [{ required: true, message: '营业执照扫描件不能为空!' }]}]" name="file" listType="picture-card"  class="avatar-uploader up_img" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="License_Change">
					<div class="img_zz" v-if="License_img">
						<div class="img_zz_text" >
							<a-icon style="font-size: 30px;" :type="Uploading ? 'Uploading' : 'plus'" />
							<div class="ant-upload-text" style="margin-top: 10px;">
								请上传正确的企业营业执照扫描件正面，否则影响后期业务办理 图片格式：jpg.jpeg.png
							</div>
						</div>
						<div class="img_zz_d"></div>
					</div>
					<img  v-if="License_img" :src="License_img" alt="avatar" />
					<div class="up_img_d" v-if="!License_img">
						<a-icon style="font-size: 30px;" :type="Uploading ? 'Uploading' : 'plus'" />
						<div class="ant-upload-text" style="margin-top: 10px;">
							请上传正确的企业营业执照扫描件正面，否则影响后期业务办理 图片格式：jpg.jpeg.png
						</div>
					</div>
				</a-upload>
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="荣誉/资质" class="upzjimg">
				<a-upload name="file" :action="uploadUrl" listType="picture-card" class="up_img" :fileList="fileList" @preview="handlePreview"  @change="handleChange">
					<div v-if="fileList.length < 6" class="up_img_d">
						<a-icon style="font-size: 30px; color: #fff; padding: 10px; border-radius: 50%; background: #15837A;" :type="Uploading ? 'Uploading' : 'plus'" />
						<div class="ant-upload-text" style="margin-top: 10px;"><b>点击加号可继续添加荣誉</b></div>
					</div>
				</a-upload>
				<a-modal :visible="previewVisible"  :footer="null" @cancel="handleCancel">
					<img alt="example" style="width: 100%" :src="previewImage" />
				</a-modal>
			</a-form-item>
			<a-row style="margin-top: 10px;">
				<a-col :span="24">
					<p style="margin: 0;">
						<a-divider style="width: 95%;margin-left: 20px;" />
					</p>
				</a-col>
			</a-row>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="协议" class="wy-agreement"  >
				<a-checkbox v-decorator="['agreement',{ rules: [ {required: true,pattern: /true/, message: '请阅读并接受',}]}]">
					我已阅读并接受<a href="javascript:;" @click="userShow=true">《云南国际物流云用户协议》</a><a href="javascript:;" @click="webShow=true">《用户信息发布协议》</a>
				</a-checkbox>
			</a-form-item>
			<div class="ant-row ant-form-item">
				<div class="ant-col-4 ant-form-item-label"></div>
				<div class="ant-col-10 ant-form-item-control-wrapper">
					<div class="ant-form-item-control">
						<span class="ant-form-item-children">
							<a-button type="primary" html-type="submit" style="width: 280px;height:50px;margin-top: -10px;">
								立即认证
							</a-button>
						</span>
					</div>
				</div>
			</div>
		</a-form>
		<a-modal  :visible="webShow" @cancel="close" width="900px"  :maskClosable='false' :footer="null">
			<web @close="close" v-if="webShow" @cancel="close"></web>
		</a-modal>
		<a-modal  :visible="userShow" @cancel="close" width="900px"  :maskClosable='false' :footer="null">
			<user @close="close" v-if="userShow" @cancel="close"></user>
		</a-modal>
	</div>
</template>
<script>
	import { mapState,mapMutations } from 'vuex'
	import moment from 'moment'
	import 'moment/locale/zh-cn';
	moment.locale('zh-cn')
	import {checkTel, checkTelNum, checkEmail} from 'utils/formValidate'
	function getBase64(img, callback) {
		const reader = new FileReader()
		reader.addEventListener('load', () => callback(reader.result))
		reader.readAsDataURL(img)
	}
	import { environment } from '@/environments/environment'
	import Web from '@/components/tool/web'
	import User from '@/components/tool/user'
	export default {
		components: {
			Web,
			User
		},
		data() {
			return {
				webShow:false,
				userShow:false,
				FILEUPLOADURL: environment.FileUploadUrl2,
				loading:false,
				userdata:'', // 个人信息
				uploadUrl: environment.FileUploadUrl+'/fileupload/upload',// 图片上传地址
				License_img:'',// 营业执照照片
				company_img: '', //企业形象照
				previewVisible: false,
		        previewImage: '',
		        fileList: [],
				Uploading: false,
				imageUrl: '',
				formItemLayout: {
					labelCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 4
						},
					},
					wrapperCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 8
						},
					},
				},
				tailFormItemLayout: {
					wrapperCol: {
						xs: {
							span: 24,
							offset: 16,
						},
						sm: {
							span: 12,
							offset: 2,
						},
					},
				},

				certificatesjpg: '',
				certificatesPath: '',
				companyPic: '',
				companyPath: '',
				
				pageList:[],
				linkList:[],
				activePage:''
			}
		},
		computed: {
		    ...mapState({
		      user: state => state.account.user,
		    })
		},
		beforeCreate() {
			this.form = this.$form.createForm(this);
		},
		created (){
			this.getuserinfo()
		},
		methods: {
			disabledDate(current) {
		      // Can not select days before today and today
		      return current && current > moment().endOf('day');
		    },
			// 关闭协议弹窗
			close(){
			    this.webShow=false;
				this.userShow=false;
			},
			
			// 校验手机号
			checkMobile:checkTel,
			// 上传证件
			beforeUpload(file) {
				console.log(file.type)
				if(file.type == 'image/jpeg' || file.type == 'image/png' || file.type == 'image/jpg'){
					return true
				}else{
					this.$message.error('请选这正确的图片格式!')
					return false
				}
			},
			// 上传营业执照照片
			License_Change(info){
				if(info.file.status === 'uploading') {
					this.Uploading = true
					return
				}
				if(info.file.status === 'done') {
					console.log(info)
					this.License_img = this.FILEUPLOADURL + info.file.response.data.certifJpgFile
					this.certificatesjpg = info.file.response.data.certificatesjpg
					this.certificatesPath = info.file.response.data.certificatesPath
					this.form.setFieldsValue({
						'yinyezhizhao': info.file.response.data.certificatesjpg
					})
					this.Uploading = false
				}
			},
			// 上传企业形象照
			company_Change (info){
				if(info.file.status === 'uploading') {
					this.Uploading = true
					return
				}
				if(info.file.status === 'done') {
					this.company_img = this.FILEUPLOADURL + info.file.response.data.certifJpgFile
					this.companyPic = info.file.response.data.certificatesjpg
					this.companyPath = info.file.response.data.certificatesPath
					this.form.setFieldsValue({
						'xingxiangzhao': info.file.response.data.certificatesjpg
					})
					this.Uploading = false
				}
			},
			// 上传荣誉照片
		    handleChange ({fileList}) {
		    	console.log(fileList)
		    	for(var i in fileList){
					if(fileList[i].type != 'image/jpeg' && fileList[i].type != 'image/png' && fileList[i].type != 'image/jpg'){
						this.$message.error('请选这正确的图片格式!')
						return
					}
		    	}
		    	let certificatesPath = [];
		    	let certificatesjpg = [];
		    	for(var i in fileList){
		    		if(fileList[i].status === 'done'){
		    			fileList[i].url =this.FILEUPLOADURL+fileList[i].response.data.certifJpgFile
						fileList[i].certificatesPath = fileList[i].response.data.certificatesPath;
						fileList[i].certificatesjpg = fileList[i].response.data.certificatesjpg;
		    		}
		    	}
		      	this.fileList = fileList
		      	console.log(this.fileList)
		    },
			handleCancel () {
		      this.previewVisible = false
		    },
		    handlePreview (file) {
		      this.previewImage = file.url || file.thumbUrl
		      this.previewVisible = true
		    },
		    // 获取用户信息
		    getuserinfo(){
				this.$get('/userDetail/'+this.user.username)
				.then((r) => {
					console.log(r)
	            	let d = r.data.data
            	 	this.userdata = d
	            	this.form.setFieldsValue({
	            		username: d.username,
	            		mobile: d.mobile,
	            		companyType: d.companyType ,
	            		company: d.company,
	            		socialCode: d.socialCode,
	            		companyCreateTime: d.companyCreateTime&&moment( d.companyCreateTime, 'YYYY-MM-DD HH:mm:ss'),
	            		legalPerson: d.legalPerson,
	            		companyAddress: d.companyAddress,
	            		landline: d.landline,
	            		companyBriefRemark: d.companyBriefRemark
	            	});
	            	if (d.certificatesjpg) {
						this.License_img = this.FILEUPLOADURL + d.certificatesPath + d.certificatesjpg
						this.certificatesjpg = d.certificatesjpg
						this.certificatesPath = d.certificatesPath
						this.form.setFieldsValue({
							'yinyezhizhao': d.certificatesjpg
						})
					}
					if (d.companyPic) {
						this.company_img = this.FILEUPLOADURL + d.companyPath + d.companyPic
						this.companyPic = d.companyPic
						this.companyPath = d.companyPath
						this.form.setFieldsValue({
							'xingxiangzhao': d.companyPic
						})
					}
					if(d.qualificationsJpg){
						let arr = d.qualificationsJpg.split(',');
						let arr2 = d.qualificationsPath.split(',');
						for (let j = 0;j<arr.length;j++) {
							this.fileList.push({
								uid: -j,
								status:'done',
								response:{
									data:{
										certifJpgFile:arr2[j]+arr[j],
										certificatesPath:arr2[j],
										certificatesjpg:arr[j]
									}
								},
								url: this.FILEUPLOADURL+arr2[j]+arr[j],
								name:arr[j]
							})
						}
					}
				})
			},
			// 认证提交
			handleSubmit(e) {
				if(this.loading) return;
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
					if(!err) {
						this.loading = true;
						values.companyCreateTime = values.companyCreateTime.format('YYYY-MM-DD HH:mm:ss')
						values.roleId = this.userdata.roleId
						values.userId = this.userdata.userId
						values.deptId = this.userdata.deptId
						values.status = this.userdata.status
						values.ssex = this.userdata.ssex || '0'
						values.certificatesjpg = this.certificatesjpg
						values.certificatesPath = this.certificatesPath
						values.companyPic = this.companyPic
						values.companyPath = this.companyPath
						if(this.fileList){
							var qualificationsJpg = []
							var qualificationsPath = []
							for(var i in this.fileList){
								qualificationsJpg.push(this.fileList[i].certificatesjpg);
								qualificationsPath.push(this.fileList[i].certificatesPath);
							}
							values.qualificationsJpg = String(qualificationsJpg)
							values.qualificationsPath = String(qualificationsPath)
						}
						values.type = 2
						// values.approvalStatus = 1
						 values.attestationStatus = 110
						console.log('Received values of form: ', values);
						var _this = this
						this.$put('/userDetail', values, true).then((r) => {
			            	console.log(r,8989)
							if(r.data.code == '0000') {
								this.$success({
							        title: '提示',
							        content: (  // JSX support
							          <div>
							            您的企业认证已提交，可在认证状态中查询认证审核进度!
							          </div>
							        ),
							        onOk() {
							        	_this.$router.push('/')
							        },
							    });
							}else{
								this.$message.error(r.data.message)
							}
			            	this.loading = false;
			            }).catch((e) => {
			            	this.loading = false;
			            })
					}
				});
			},
		    ...mapMutations({
		      setPermissions: 'account/setPermissions',
		      setRoles: 'account/setRoles',
		      setUser: 'account/setUser',
		    }),
		    saveLoginData (data) {
		      this.setUser(data.user)
		      this.setPermissions(data.permissions)
		      this.setRoles(data.roles)
		    }
		}
	}
</script>

<style lang="less">
	.user-auth-enterprise {
		margin-top: 20px;
		.upzjimg{
			.ant-upload{
				padding: 0;
			}
			.ant-upload-list-picture-card .ant-upload-list-item{
				width:216px;
				height:216px;
			}
			.ant-upload.ant-upload-select-picture-card{
				border: 1px solid #d9d9d9;
			}
			.up_img{
				float: left;
				position: relative;
				.ant-upload.ant-upload-select-picture-card{
					width: 216px;
					height: 216px;
				}
				img{
					width: 200px;
					height: 200px;
				}
				.up_img_d{
					width: 200px;
					height: 200px;
					padding: 55px 10px 10px 10px; 
				}
				.img_zz{
					width: 216px;
					height: 216px; 
					left: 0px;
					top: 0px;
					position: absolute; 
					color: #fff;
					.img_zz_text{
						position: absolute;
						z-index: 10;
						padding: 55px 10px 10px 10px; 
					}
					.img_zz_d{
						position: absolute;
						width: 216px ;
						height:216px;
						background: #000;
						opacity:0.6;
					}
				}
			}
		}
	}
</style>